<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式布局的案例</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <h1>头部</h1>
    </header>
    <main>
        <div class="left">
            <h2>左边内容</h2>
            <p>这是一行文本</p>
            <img src="https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800" alt="Sample Image">
        </div>
        <div class="right">
            <h2>右边内容</h2>
            <p>这是一行文本</p>
        </div>
    </main>
    <footer>
        <p>底部</p>
    </footer>
</body>
</html>